<template>
  <!-- <div id="app">
    <div>
      <router-view></router-view>
    </div>
  </div> -->
  <div>
    <div>
      <button @click="handerClick('tab1')">ss2</button>
      <button @click="handerClick('tab2')">New2</button>
      <button @click="handerClick('tab3')">dd3</button>
    </div>
   <keep-alive include="tab1">
           <component :is="status"></component>
   </keep-alive>
    <!-- <Newslot url="/profile">
      Your Profile
      <span>oodocsssj</span> -->
    <!-- 也可以通过插槽插入一个组件 -->
    <!-- <Ss2></Ss2>
      <p>ssssssscccccccc</p>
     </Newslot> -->
  <Newslot  v-bind:todos="todos">
    <!-- <div slot="footer">footer</div>
         <div slot="header">header</div>
            <div>body</div> -->
    <!-- save -->
    <!-- 当你想在插槽内使用数据时 -->
    <!-- <div slot="user">abc--{{user}}</div> -->
    <template slot-scope="{ todo }">
            <span v-if="todo.isComplete">✓</span>
            {{ todo.text }}
          </template>
     </Newslot>
  </div>
</template>

<script>
import Ss2 from "./views/slot/Ss2";
import Newslot from "./views/slot/New2.vue";
import Dd3 from './views/slot/Dd3.vue'
export default {
  components: {
     Newslot,
    // Ss2
   'tab1':Ss2,
  //  'tab2':Newslot,
   'tab3':Dd3,
  },
  data() {
    return {
      status:'tab1',
      user: "张晓绘",
      todos: [
        { id: 1, text: "111", isComplete: true },
        { id: 2, text: "222", isComplete: false },
        { is: 3, text: "333", isComplete: true }
      ]
    };
  },
  methods:{
    handerClick(val){
      this.status=val
    }
  },
 
 
};
// import Nav from './components/Nav.vue'
// export default {
//   name: 'App',
//   components:{
//     // Nav
//   }
// }
</script>

<style>
/* *{
  margin: 0;
  padding: 0;
} */
</style>
